<template>
    <div class="music_item">
        <div class="music_item_left">
            <el-avatar style="width: 5vw;height: 5vw;" :src="base_url + item.Music_img" fit="fill"></el-avatar>
            <span>{{ item.musicname }}</span>
            <span>{{ item.singer }}</span>
            <span>{{ item.style.language }}</span>
            <span>{{ item.style.genre }}</span>
        </div>
        <div class="music_item_right">
            <img @click="choice_play" style="width: 15%;"
                :src="appStore.other_music.url_radio == (props.item.local_address || props.item.network_address) && appStore.isplay ? pause : play"
                alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import pause from "@/assets/svg/home/pause.svg"
import play from "@/assets/svg/home/play.svg"
import { AppStore } from "@/store";
const base_url = import.meta.env.VITE_APP_URL
const appStore = AppStore()
const props = defineProps(['item'])
const isplay = ref(false)
const choice_play = () => {
    isplay.value = !isplay.value
    appStore.other_music.url_img = props.item.Music_img
    appStore.other_music.musicname = props.item.musicname
    appStore.other_music.singer = props.item.singer
    if (props.item.local_address) {
        console.log(props.item.local_address)
        appStore.other_music.url_radio = props.item.local_address
    } else {
        appStore.other_music.url_radio = props.item.network_address
    }
    if (isplay.value) {
        appStore.isplay = true
    } else {
        appStore.isplay = false
    }

}

</script>

<style scoped lang="scss">
.music_item {
    border-radius: 30vw;
    font-size: 1.5vw;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    padding: 2vw;
    margin-top: 1vw;

    .music_item_left {
        flex: 4;
        display: flex;
        align-items: center;
        color: white;

        span {
            margin-left: 1vw;
        }
    }

    .music_item_right {
        flex: 1;
        display: flex;
        justify-content: center;


    }
}
</style>